<template>
	<nuxt-layout>
		<template #head>
			<top-nav-bar />
		</template>
		<template #main>
			<nuxt-page />
			<tools-bar />
		</template>
	</nuxt-layout>
</template>

<script name="App" lang="ts" setup></script>

<style lang="scss">
* {
	transition: all 0.3s;
	scroll-behavior: smooth; // 开启平滑滚动
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

html,
body {
	width: 100%;
	height: 100%;
	background-color: #eee;

	// 页面滚动条样式
	&::-webkit-scrollbar {
		width: 5px;
	}

	&::-webkit-scrollbar-thumb {
		cursor: pointer;
		border-radius: 5px;
		background-color: #409eff;
	}
}

// Vue Transition
.v-enter-active,
.v-leave-active {
	transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
	opacity: 0;
}
</style>
